<template>
    <div>
        <nt-row class="title_main">
            <nt-col :span="12">我的提现银行账户</nt-col>
            <nt-col :span="12" align="right"><nt-button type="primary" @click="addBankCard">+添加新的提现账户</nt-button></nt-col>
        </nt-row>
        <nt-table :data="bankAccountsList" class="dialog_table mT24">
            <nt-table-column label="账号号码">
                <template scope="scope">
                    <p v-if="scope.row.account_number">{{scope.row.account_number}}</p>
                    <p v-else> - </p>
                </template>
            </nt-table-column>
            <nt-table-column label="账户名">
                <template scope="scope">
                    <p v-if="scope.row.account_holder_name">{{scope.row.account_holder_name}}</p>
                    <p v-else> - </p>
                </template>
            </nt-table-column>
            <nt-table-column label="银行">
                <template scope="scope">
                    <p v-if="scope.row.bank_name">{{scope.row.bank_name}}</p>
                    <p v-else> - </p>
                </template>
            </nt-table-column>
            <nt-table-column label="开户分行">
                <template scope="scope">
                    <p v-if="scope.row.bank_branch_name">{{scope.row.bank_branch_name}}</p>
                    <p v-else> - </p>
                </template>
            </nt-table-column>
        </nt-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                bankAccountsList: []
            }
        },
        mounted() {
            this.requestGetBankAccounts();
        },
        methods: {
            addBankCard() {
                this.$router.push('/main/addBankCard');
            },
            //接口请求---获取银行账户列表
            async requestGetBankAccounts() {
                let params = {};
                params.accountId = this.ctx.store.get('account_id');

                let result = await this.ctx.models.settlement.getBankAccountsList(params, this.ctx);

                if (result.statusCode == 200) {
                    this.bankAccountsList = result.data;
                }
            },
        }
    }
</script>

<style scoped>
    .add_bank_card_page {
        width: 800px;
        height: 30px;
        margin: 10px auto;
    }
</style>